<template>
  <div class="item">
    <label for :style="'width: ' + labelWidth  + '; text-align: center; display:inline-block;'">{{lableName}}</label>
    <div class="inline-block">
      <!-- 日期选择器相关 -->
      <div class="block">
        <el-date-picker
          v-model="dateChooseArr"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :size="size ? size: 'small'"
          :style="'width: ' + dateWidth ? dateWidth : '120px;' + ';'"
        ></el-date-picker>
      </div>
      <!-- 日期选择器相关 -->
    </div>
  </div>
</template>

<script>
//调用

// <search-date 
//     lableName="${labelName}"
//     :tThis="this"
//     labelWidth="80px;"
//     dateWidth="150px;"
//     @dateChange="${dateChangeMethodsName}"
//   /> 


// import search_date from "@/components/LcM/search_con/search_date";

// "search-date": search_date,

// /* 日期选择 */
// handleDateChange (dateArr, startDate, endDate) {
//   // this.dateChooseArr, this.startDate, this.endDate
// }

export default {
  components: {},
  props: {
    lableName: {
      type: String,
    },
    size: {
      type: String,
    },
    tThis: {
      type: Object,
    },
    labelWidth: {
      type: String,
    },
    dateWidth: {
      type: String,
    },
  },
  watch: {
    dateChooseArr(newVal, oldVal) {
      this.startDate = this.dateChooseArr[0];
      this.endDate = this.dateChooseArr[1];
      this.$emit("dateChange", this.dateChooseArr, this.startDate, this.endDate);
    },
  },
  data() {
    return {
      dateChooseArr: [],
      endDate: "",
      startDate: "",
      /* 日期选择器相关*/
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {},
};

//  <date-search
//             lableName="注册时间"
//             :tThis="this"
//             labelWidth="60px;"
//             dateWidth="120px;"
//             @dateChage="handleRegisterDateChange"
//           />
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

.item {
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 10px;
  label {
    display: inline-block;
    min-width: 60px;
    font-size: 14px;
    color: #263238;
    text-align: left;
  }
  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }

  .input {
    width: 160px;
  }
}
</style>

